<html>
	<head>

		<script src="../js/jquery.pack.js"></script>
		<script src="../js/jquery.Jcrop.pack.js"></script>
		<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />
		<link rel="stylesheet" href="demo_files/demos.css" type="text/css" />
		
		<style>
		.custom .jcrop-vline, .custom .jcrop-hline {
			background: yellow;
		}
		.custom .jcrop-handle {
			border-color: black;
			background-color: #C7BB00;
			-moz-border-radius: 3px;
			-webkit-border-radius: 3px;
		}
		</style>

		<script language="Javascript">

		$(function() {
			$('#jcrop_target').Jcrop({
				setSelect: [ 20, 130, 480, 230 ],
				addClass: 'custom',
				bgColor: 'yellow',
				bgOpacity: .8,
				sideHandles: false
			});
		});

		</script>

	</head>

	<body>
		<div class="jcExample">
		<div class="article">

			<h1>Jcrop - API Demo</h1>
			<img src="demo_files/flowers.jpg" id="cropbox" />

			<div style="margin: 20px 0;">
				<button id="anim1">A1</button>
				<button id="anim2">A2</button>
				<button id="anim3">A3</button>
				<button id="anim4">A4</button>
				<button id="anim5">A5</button>
				<button id="setsel">Set</button>
			</div>

			<p>
				<b>API feature demonstration.</b>
				Press the buttons above to animate different selections.
				This demonstrates some of the upcoming API functionality,
				but actual implementation is currently undocumented (read the source).
			</p>

		<div id="dl_links">
			<a href="http://deepliquid.com/content/Jcrop.html">Jcrop Home</a> |
			<a href="http://deepliquid.com/content/Jcrop_Manual.html">Manual (Docs)</a>
		</div>

		</div>
		</div>
	</body>
</html>

